<template>
  <div>
    <a-popover v-model="visible" title="Title" trigger="click">
      <a slot="content" @click="abcd">Close</a>
      <a-button type="primary"> Click me </a-button>
    </a-popover>

    <a-tooltip slot="suffix" title="Extra information">
      <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
    </a-tooltip>

    <a-input ref="userNameInput" v-model="userName" placeholder="Basic usage">
      <span slot="addonBefore"> 名字</span>
      <a-tooltip slot="suffix" title="Extra information">
        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />

        <span style="margin-left: 8px">{{userName.length}}/20</span>
      </a-tooltip>
    </a-input>
    <a-input ref="userNameInput" v-model="userName" placeholder="Basic usage">
      <span slot="addonBefore"> 名字</span>
      <a-popover slot="suffix" title="Extra information">
        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />

        <span style="margin-left: 8px">{{userName.length}}/20</span>
      </a-popover>
    </a-input>
  </div>
</template>

<script>
export default {
  name: 'antPop',
  data () {
    return {
      visible: true,
      userName: ''
    }
  },
  methods: {
    abcd () {
      console.log(111)
      this.visible = true
    }
  }
}
</script>
